<template>
  <div>
    <Header></Header>
    <section class="jarallax py-5">
      <div class="jarallax-bg"></div>
      <div class="hero-content py-0 py-md-5">
        <div class="d-flex flex-column d-md-block align-items-center">
          <el-breadcrumb separator="/">
            <el-breadcrumb-item>首页</el-breadcrumb-item>
            <el-breadcrumb-item>页面</el-breadcrumb-item>
            <el-breadcrumb-item>结账</el-breadcrumb-item>
          </el-breadcrumb>
          <h1>结账</h1>
        </div>
      </div>
    </section>
    <section class="section">
      <div class="container-lg">
        <div class="row">
          <h2 class="text-primary">账单地址</h2>
          <el-form label-width="200px">
            <div class="ge" style="margin-right: 50px">
              <el-form-item label="名字" class="name-label"> </el-form-item>
              <el-input
                v-model="uname"
                :class="{ 'focused-input2': isFocused2 }"
                @focus="handleFocus2"
                @blur="handleBlur2"
                class="name-input"
              ></el-input>
            </div>
            <div class="ge">
              <el-form-item label="密码" class="name-label"> </el-form-item>
              <el-input
                type="password"
                v-model="password"
                :class="{ 'focused-input2': isFocused }"
                @focus="handleFocus"
                @blur="handleFocus"
                class="name-input"
              ></el-input>
            </div>
            <div class="ge">
              <el-form-item label="用户名" class="name-label label2">
              </el-form-item>
              <el-input
                v-model="username"
                :class="{ 'focused-input': isFocused3 }"
                @focus="handleFocus3"
                @blur="handleBlur3"
                placeholder="用户名"
                style="width: 890px; margin-bottom: 10px"
              >
                <template slot="prepend">@</template>
              </el-input>
            </div>
            <div class="ge" style="margin-right: 50px">
              <el-form-item label="电子邮件(可选)" class="name-label label3">
              </el-form-item>
              <el-input
                v-model="email"
                :class="{ 'focused-input': isFocused4 }"
                @focus="handleFocus4"
                @blur="handleBlur4"
                placeholder="you@example.com"
                class="name-input"
                style="width: 890px"
              ></el-input>
            </div>
            <div class="ge" style="margin-right: 50px">
              <el-form-item label="地址" class="name-label"> </el-form-item>
              <el-input
                v-model="address"
                :class="{ 'focused-input': isFocused5 }"
                @focus="handleFocus5"
                @blur="handleBlur5"
                placeholder="街道号、门牌号"
                class="name-input"
                style="width: 890px"
              ></el-input>
            </div>
            <div class="ge" style="margin-right: 50px">
              <el-form-item label="国家" class="name-label"></el-form-item>
              <el-select
                v-model="selectedCountry"
                :class="{ 'focused-input2': isFocused7 }"
                @focus="handleFocus7"
                @blur="handleBlur7"
                placeholder="选择..."
                class="name-input-2"
              >
                <el-option
                  v-for="item in countries"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                ></el-option>
              </el-select>
            </div>
            <div class="ge" style="margin-right: 40px">
              <el-form-item label="邮政编码" class="name-label label6">
              </el-form-item>
              <el-input
                v-model="zip"
                :class="{ 'focused-input': isFocused9 }"
                @focus="handleFocus9"
                @blur="handleBlur9"
                class="name-input-2"
              ></el-input>
            </div>
            <div class="xian"></div>
            <div class="ge">
              <el-checkbox
                v-model="sameAsBillingAddress"
                label="送货地址与我的账单地址相同"
                :class="{ 'focused-input': isFocused9 }"
                @focus="handleFocus9"
                @blur="handleBlur9"
                class="custom-checkbox name-input"
              >
              </el-checkbox
              ><br />
              <el-checkbox
                v-model="saveInfoForLater"
                label="保存此信息以备下次使用"
                :class="{ 'focused-input': isFocused15 }"
                @focus="handleFocus15"
                @blur="handleBlur15"
                class="custom-checkbox name-input"
              >
              </el-checkbox>
            </div>
            <div class="xian"></div>
            <div class="ge hehe" style="margin-right: 50px">
              <el-form-item label="付款" class="name-label custom-label">
              </el-form-item>
              <el-radio
                v-model="paymentMethod"
                label="信用卡"
                @focus="handleFocus16"
                @blur="handleBlur16"
                class="name-input"
              >
              </el-radio>
              <el-radio
                v-model="paymentMethod"
                label="借记卡"
                :class="{ 'focused-input': isFocused17 }"
                @focus="handleFocus17"
                @blur="handleBlur17"
                class="name-input"
              >
              </el-radio>
              <el-radio
                v-model="paymentMethod"
                label="贝宝"
                :class="{ 'focused-input': isFocused18 }"
                @focus="handleFocus18"
                @blur="handleBlur18"
                class="name-input"
              >
              </el-radio>
            </div>
            <div class="ge" style="margin-right: 50px">
              <el-form-item label="卡片上的名字" class="name-label label7">
              </el-form-item>
              <el-input
                v-model="inputValue7"
                :class="{ 'focused-input2': isFocused11 }"
                @focus="handleFocus11"
                @blur="handleBlur11"
                class="name-input"
              ></el-input>
              <span class="input-description">卡片上显示的全名</span>
            </div>
            <div class="ge">
              <el-form-item label="信用卡号码" class="name-label label8">
              </el-form-item>
              <el-input
                v-model="inputValue8"
                :class="{ 'focused-input': isFocused12 }"
                @focus="handleFocus12"
                @blur="handleBlur12"
                class="name-input"
              ></el-input>
              <span class="input-description">&nbsp;</span>
            </div>
            <div class="ge" style="margin-right: 50px">
              <el-form-item label="到期" class="name-label"> </el-form-item>
              <el-input
                v-model="inputValue9"
                :class="{ 'focused-input2': isFocused13 }"
                @focus="handleFocus13"
                @blur="handleBlur13"
                class="name-input-3"
              ></el-input>
            </div>
            <div class="ge">
              <el-form-item label="验证码" class="name-label"> </el-form-item>
              <el-input
                v-model="inputValue10"
                :class="{ 'focused-input': isFocused14 }"
                @focus="handleFocus14"
                @blur="handleBlur14"
                class="name-input-3"
              ></el-input>
            </div>
            <div class="xian"></div>
            <div class="btn-box">
              <el-button
                type="success"
                class="btn-1"
                style="width: 890px; font-size: 18px"
                @click="proceedToCheckout"
                >继续结账</el-button
              >
            </div>
          </el-form>
        </div>
        <div class="row-right">
          <div class="col-md-5 col-lg-4 order-md-last">
            <h4 class="d-flex justify-content-between align-items-center mb-3">
              <span class="text-primary" style="color: #6bb252"
                >您的购物车</span
              >
              <el-badge
                :value="tableData.length"
                class="ml-2 custom-badge"
                type="primary"
              >
              </el-badge>
            </h4>
            <div>
              <el-table :data="tableData" style="width: 100%">
                <el-table-column prop="cartFoodname" width="350">
                  <template #default="{ row }">
                    <span class="product-name">{{ row.cartFoodname }}</span>
                    <!-- <br />
                    <span class="product-description">{{
                      row.description
                    }}</span> -->
                  </template>
                </el-table-column>
                <el-table-column prop="quantity" width="100" label="数量">
                  <template #default="{ row }">
                    ×{{ row.quantity || 1 }}
                  </template>
                </el-table-column>
                <el-table-column
                  prop="cartTotal"
                  width="150"
                  class-name="price-column"
                  label="小计"
                >
                  <template #default="{ row }">
                    ${{ row.cartTotal.toFixed(2) }}
                    <!-- 显示总价并保留两位小数 -->
                  </template>
                </el-table-column>
                <!-- <el-table-column
                  prop="cartTotal"
                  width="180"
                  class-name="price-column"
                >
                </el-table-column> -->
              </el-table>
              <div class="total-price">
                <el-input
                  class="total-price-input"
                  :class="{ 'focused-input': isFocused19 }"
                  @focus="handleFocus19"
                  @blur="handleBlur19"
                  v-model="totalAmount"
                ></el-input>
                <el-button type="info" @click="redeemPromoCode">
                  兑换</el-button
                >
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
    <demo></demo>
  </div>
</template>
<script>
import demo from "./demo.vue";
import { addUser, getUser } from "../api/api";
import Header from "./header.vue";
export default {
  components: {
    Header,
    demo,
  },
  data() {
    return {
      totalAmount: 0, // 总金额
      uname: "",
      password: "",
      username: "",
      email: "",
      address: "",
      selectedCountry: "",
      sameAsBillingAddress: false,
      paymentMethod: "",
      zip: "",
      inputValue7: "",
      inputValue8: "",
      inputValue9: "",
      inputValue10: "",
      saveInfoForLater: false,
      promoCode: "",
      // cartData: [],
      // totalPrice: 0,
      tableData: [],
      items: [],
      // tableData: [
      //   {
      //     productName: "产品名称",
      //     description: "简要描述",
      //     price: "$12",
      //   },
      //   {
      //     productName: "第二件商品",
      //     description: "简要描述",
      //     price: "$8",
      //   },
      //   {
      //     productName: "第三件商品",
      //     description: "简要描述",
      //     price: "$5",
      //   },
      //   {
      //     productName: "促销代码",
      //     description: "简要描述",
      //     price: "-$4",
      //   },
      //   {
      //     productName: "总计(美元)",
      //     description: "",
      //     price: "$20",
      //   },
      // ],
      countries: [
        { value: "option1", label: "中国" },
        { value: "option2", label: "美国" },
        { value: "option3", label: "英国" },
      ],
      zhou: [
        { value: "option1", label: "加利福尼亚" },
        { value: "option2", label: "延边朝鲜族自治州" },
        { value: "option3", label: "湘西土家族苗族自治州" },
      ],
      isFocused: false, // 用于控制样式的布尔值
      isFocused2: false,
      isFocused3: false,
      isFocused4: false,
      isFocused5: false,
      isFocused6: false,
      isFocused7: false,
      isFocused8: false,
      isFocused9: false,
      isFocused10: false,
      isFocused11: false,
      isFocused12: false,
      isFocused13: false,
      isFocused14: false,
      isFocused15: false,
      isFocused16: false,
      isFocused17: false,
      isFocused18: false,
      isFocused19: false,
      // isFocused20:false,
    };
  },
  created() {
    this.items = this.$route.params.items || [];
    console.log("111" + this.items); // 检查是否正确接收到了数据
    this.updateTableData();
    // console.log("tableData：", this.tableData);
    // this.tableData = this.$route.params.cartData || [];
    // this.totalPrice = this.$route.params.totalPrice || "";
    // getUser();
  },
  mounted() {
    this.fetchUsers();
    const jarallax = this.$el.querySelector(".jarallax");
    const jarallaxBg = this.$el.querySelector(".jarallax-bg");

    jarallax.addEventListener("mousemove", (event) => {
      const rect = jarallax.getBoundingClientRect();
      const x = event.clientX - rect.left;
      const y = event.clientY - rect.top;

      const offsetX = (x / rect.width - 0.5) * 50; // 调整偏移量
      const offsetY = (y / rect.height - 0.5) * 50; // 调整偏移量

      jarallaxBg.style.backgroundPosition = `${50 + offsetX}% ${50 + offsetY}%`;
    });

    jarallax.addEventListener("mouseleave", () => {
      jarallaxBg.style.backgroundPosition = "center";
    });
  },
  methods: {
    updateTableData() {
      this.tableData = this.items.map((item) => ({
        cartFoodname: item.name,
        quantity: item.quantity || 1,
        cartTotal: `$${item.cartTotal * item.quantity}`,
      }));
      // 计算总金额
      this.totalAmount = this.tableData
        .reduce((sum, item) => sum + item.cartTotal, 0)
        .toFixed(2);
    },
    //获取购物车数据列表
    async fetchUsers() {
      try {
        const response = await getUser();
        console.log(response);
        this.tableData = response; // 确保 response 是一个包含购物车商品信息的数组
      } catch (error) {
        console.error(error);
      }
    },
    // const tableData=ref(getUser.data),
    proceedToCheckout() {
      const userInfo = {
        // uname: this.uname,
        // password: this.password,
        // // username: this.username,
        // email: this.email,
        // address: this.address,
        // selectedCountry: this.selectedCountry,
        // sameAsBillingAddress: this.sameAsBillingAddress,
        // paymentMethod: this.paymentMethod,
        // zip: this.zip,
        // inputValue7: this.inputValue7,
        // inputValue8: this.inputValue8,
        // inputValue9: this.inputValue9,
        // inputValue10: this.inputValue10,
        // saveInfoForLater: this.saveInfoForLater,

        uname: "元素",
        pass: "123456789",
        email: "element@example.com",
        phone: "1234567890",
        address: "Some Address",
        city: "City",
        state: "State",
        zip: "1231324",
        sameAsBillingAddress: false,
        paymentMethod: "",
      };

      console.log("发送的用户信息:", userInfo);

      addUser(userInfo)
        .then((response) => {
          console.log("用户信息添加成功:", response);
          // 这里可以添加跳转到下一个页面的逻辑
        })
        .catch((error) => {
          console.error("用户信息添加失败:", error);
        });
    },
    redeemPromoCode() {
      // 兑换促销码的逻辑
      // console.log("兑换促销码:", this.promoCode);
      console.log("购物车总金额:", this.totalAmount);
    },
    handleFocus() {
      this.isFocused = !this.isFocused; // 获取焦点时设置为true
    },
    handleFocus2() {
      this.isFocused2 = true; // 获取焦点时设置为true
    },
    handleBlur2() {
      this.isFocused2 = false; // 失去焦点时设置为false
    },
    handleFocus3() {
      this.isFocused3 = true; // 获取焦点时设置为true
    },
    handleBlur3() {
      this.isFocused3 = false; // 失去焦点时设置为false
    },
    handleFocus4() {
      this.isFocused4 = true; // 获取焦点时设置为true
    },
    handleBlur4() {
      this.isFocused4 = false; // 失去焦点时设置为false
    },
    handleFocus5() {
      this.isFocused5 = true; // 获取焦点时设置为true
    },
    handleBlur5() {
      this.isFocused5 = false; // 失去焦点时设置为false
    },
    handleFocus6() {
      this.isFocused6 = true; // 获取焦点时设置为true
    },
    handleBlur6() {
      this.isFocused6 = false; // 失去焦点时设置为false
    },
    handleFocus7() {
      this.isFocused7 = true; // 获取焦点时设置为true
    },
    handleBlur7() {
      this.isFocused7 = false; // 失去焦点时设置为false
    },
    handleFocus8() {
      this.isFocused8 = true; // 获取焦点时设置为true
    },
    handleBlur8() {
      this.isFocused8 = false; // 失去焦点时设置为false
    },
    handleFocus9() {
      this.isFocused9 = true; // 获取焦点时设置为true
    },
    handleBlur9() {
      this.isFocused9 = false; // 失去焦点时设置为false
    },
    handleFocus10() {
      this.isFocused10 = true; // 获取焦点时设置为true
    },
    handleBlur10() {
      this.isFocused10 = false; // 失去焦点时设置为false
    },
    handleFocus11() {
      this.isFocused11 = true; // 获取焦点时设置为true
    },
    handleBlur11() {
      this.isFocused11 = false; // 失去焦点时设置为false
    },
    handleFocus12() {
      this.isFocused12 = true; // 获取焦点时设置为true
    },
    handleBlur12() {
      this.isFocused12 = false; // 失去焦点时设置为false
    },
    handleFocus13() {
      this.isFocused13 = true; // 获取焦点时设置为true
    },
    handleBlur13() {
      this.isFocused13 = false; // 失去焦点时设置为false
    },
    handleFocus14() {
      this.isFocused14 = true; // 获取焦点时设置为true
    },
    handleBlur14() {
      this.isFocused14 = false; // 失去焦点时设置为false
    },
    handleFocus15() {
      this.isFocused15 = true; // 获取焦点时设置为true
    },
    handleBlur15() {
      this.isFocused15 = false; // 失去焦点时设置为false
    },
    handleFocus16() {
      this.isFocused16 = true; // 获取焦点时设置为true
    },
    handleBlur16() {
      this.isFocused16 = false; // 失去焦点时设置为false
    },
    handleFocus17() {
      this.isFocused17 = true; // 获取焦点时设置为true
    },
    handleBlur17() {
      this.isFocused17 = false; // 失去焦点时设置为false
    },
    handleFocus18() {
      this.isFocused18 = true; // 获取焦点时设置为true
    },
    handleBlur18() {
      this.isFocused18 = false; // 失去焦点时设置为false
    },
    handleFocus19() {
      this.isFocused19 = true; // 获取焦点时设置为true
    },
    handleBlur19() {
      this.isFocused19 = false; // 失去焦点时设置为false
    },
  },
};
</script>
<style scoped>
* {
  margin: 0;
  padding: 0;
}

.focused-input .el-input__inner {
  border-color: #409eff;
  /* 修改边框颜色 */
  box-shadow: 0 0 40px rgba(6, 92, 179, 0.5);
  /* 添加阴影效果 */
}

.focused-input2 .el-input__inner {
  border-color: #409eff;
  /* 修改边框颜色 */
  box-shadow: 0 0 40px rgba(10, 100, 190, 0.5);
  /* 添加阴影效果 */
}

/* .hehe >>> .el-radio__label {
  color: pink;
  border-color: #409eff;
  box-shadow: 0 0 40px rgba(6, 92, 179, 0.5);
} */

input[type="radio"] {
  display: none;
}

input[type="checkbox"] {
  display: none;
}

.jarallax {
  position: relative;
  height: 400px;
  /* 设置图片容器的高度 */
  overflow: hidden;
}

.jarallax-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url("../images/banner-1.jpg");
  background-size: cover;
  background-position: center;
  transition: background-position 0.3s ease;
}

.hero-content {
  position: relative;
  z-index: 1;
  /* 确保文字在图片上面 */
  color: white;
  /* 根据图片颜色调整文字颜色 */
  text-align: center;
  /* 文字居中对齐 */
}

.d-md-block {
  font-size: 28px;
  margin-top: 150px;
  color: black;
  margin-left: 20px;
}

.el-breadcrumb {
  margin-bottom: 20px;
  /* 可选：增加间距 */
  font-size: 22px;
}

.d-md-block h1 {
  float: left;
  margin-left: 15px;
}

.container-lg {
  width: 92%;
  margin: 0 auto;
  margin-top: 50px;
  /* border: 1px solid red; */
  display: flex;
  margin-bottom: 80px;
}

.text-primary {
  font-size: 22px;
  margin-bottom: 15px;
}

.row {
  width: 60%;
  /* border: 2px solid greenyellow; */
  margin-right: 10px;
}

.name-label .el-form-item__label {
  margin-left: -135px;
  font-size: 22px;
}

.el-form-item {
  margin-bottom: 10px;
  /* 增加底部间距 */
  width: 100%;
  /* 确保每个form-item占据一行 */
}

.label2 {
  margin-left: 20px;
}

.ge {
  display: inline-block;
}

.name-input {
  width: 420px;
  margin-bottom: 10px;
}

.label3 {
  margin-left: 100px;
}

.label4 {
  margin-left: 70px;
}

.name-input-2 {
  width: 415px;
  margin-bottom: 10px;
}

.label5 {
  margin-left: -20px;
}

.label6 {
  margin-left: 40px;
}

.xian {
  width: 890px;
  height: 1px;
  background-color: #999;
  margin-bottom: 20px;
  margin-top: 10px;
}

.custom-checkbox .el-checkbox__inner {
  width: 20px;
  /* 调整宽度 */
  height: 20px;
  /* 调整高度 */
}

.custom-checkbox .el-checkbox__inner::after {
  box-sizing: content-box;
  content: "";
  border: 2px solid #fff;
  border-left: 0;
  border-top: 0;
  height: 11px;
  /* 调整勾选标记的高度 */
  left: 7px;
  /* 调整勾选标记的位置 */
  position: absolute;
  top: 1px;
  /* 调整勾选标记的位置 */
  transform: rotate(45deg) scaleY(0);
  width: 4px;
  /* 调整勾选标记的宽度 */
  transition: transform 0.15s ease-in 0.05s;
  transform-origin: center;
}

.label7 {
  margin-left: 80px;
}

.label8 {
  margin-left: 60px;
}

.input-description {
  display: block;
  margin-top: 5px;
  /* 调整提示文字与输入框的距离 */
  font-size: 14px;
  /* 调整提示文字的字体大小 */
  color: #666;
  /* 调整提示文字的颜色 */
  margin-bottom: 10px;
}

.name-input-3 {
  width: 260px;
}

.name-input {
  margin-top: 10px;
  /* 调整单选按钮与表单项的距离 */
}

.custom-label {
  font-weight: 700;
}

.btn-box .el-button:hover {
  background-color: #ffb909;
  border: #ffb909;
}

.row-right {
  width: 40%;
  /* border: 2px solid black; */
}

.custom-badge .el-badge__content {
  margin-left: 450px;
  background-color: #6bb252;
  width: 20px;
  height: 22px;
  line-height: 22px;
  font-size: 16px;
}

.product-name {
  font-size: 16px;
  font-weight: 700;
}

.product-description {
  font-size: 14px;
}

.price-column {
  font-size: 16px;
}

.total-price {
  margin-top: 20px;
  width: 98%;
  height: 50px;
  border: 1px solid #999;
}

.total-price-input {
  width: 86%;
  line-height: 50px;
}
</style>